<template>
  <div class="traffic-signs-container">
    <div class="sidebar">
      <div class="category-list">
        <div v-for="category in categories" :key="category.id" class="category-item"
          :class="{ active: selectedCategory === category.id }" @click="selectCategory(category.id)">
          <span class="category-name">{{ category.name }}</span>
          <span class="category-count">{{ category.questionCount }} 张</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="signs-grid">
        <div v-for="(sign, index) in currentSigns" :key="sign.id" class="sign-item" @click="selectSign(sign, index)">
          <div class="sign-image">
            <img :src="sign.questionImg" alt="" />
          </div>
          <div class="sign-description">{{ sign.questionName }}</div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="32.5rem" :before-close="handleClose" :close-on-click-modal="false"
      :show-close="false" class="infoDialog">
      <div class="dialogContent">
        <el-icon size="3rem" :color="infoIndex !== 0 ? '#b9b9b9' : '#b9b9b900'" @click="previous"
          class="cursor_pointer">
          <Back />
        </el-icon>
        <div class="sign-detail-container">
          <div class="signImage">
            <img :src="dialogInfo.questionImg" alt="">
          </div>
          <div class="sign-content">
            <h3>{{ dialogInfo.questionName }}</h3>
            <div class="description center">
              {{ dialogInfo.answer }}
            </div>
            <div class="pagination">
              <span>{{ infoIndex + 1 }}/{{ currentSigns.length }}</span>
            </div>
          </div>
          <div @click="dialogVisible = false" class="close">取消</div>
          <!-- <el-button @click="dialogVisible = false" class="close">取消</el-button> -->
        </div>
        <el-icon size="3rem" :color="infoIndex !== currentSigns.length - 1 ? '#b9b9b9' : '#b9b9b900'" @click="toNext"
          class="cursor_pointer">
          <Right />
        </el-icon>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { getQuestionInfo, getSpecialQuestion } from '@/api/userApi'
import { useUserStore } from '@/store/user'
import { Back, Right } from '@element-plus/icons-vue'

const userStore = useUserStore()
const categories = ref<any>([])
const currentSigns = ref<any>([])
const selectedCategory = ref()
const dialogVisible = ref(false)
const dialogInfo = ref<any>({})
const infoIndex = ref()

const selectCategory = (categoryId: number) => {
  selectedCategory.value = categoryId
  getIconList()
}

const selectSign = (sign: any, index: number) => {
  dialogVisible.value = true
  dialogInfo.value = sign
  infoIndex.value = index
}

const handleClose = () => {
  dialogVisible.value = false
}

const getData = async () => {
  try {
    const res = await getQuestionInfo({
      carIds: userStore.storeInfo.carModelId,
      pageUrlType: '08',
      pageSize: 100,
      pageNum: 1,
      status: 1
    })
    if (res.code === '00000') {
      categories.value = res.data.list[0].children
      selectedCategory.value = res.data.list[0].children[0].id
    }
  } catch (error) {
  }
}

const getIconList = async () => {
  try {
    let obj = {
      carModelId: userStore.storeInfo.carModelId,
      id: userStore.storeInfo.memberId,
      queryType: '03',
      groupId: selectedCategory.value,
    }
    const res = await getSpecialQuestion(obj)
    if (res.code === '00000') {
      currentSigns.value = res.data.wxQuestionS
    }
  } finally { }
}
const toNext = () => {
  infoIndex.value++
  dialogInfo.value = currentSigns.value[infoIndex.value]
}
const previous = () => {
  infoIndex.value--
  dialogInfo.value = currentSigns.value[infoIndex.value]
}

onMounted(async () => {
  await getData()
  await getIconList()
})
</script>

<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.traffic-signs-container {
  display: flex;
  min-height: calc(100vh - rem(93));
  background-color: #f5f5f5;
  overflow: hidden;
}

.sidebar {
  width: rem(400);
  background-color: #fff;
  border-right: rem(1) solid #e0e0e0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - rem(93));
  overflow-y: auto;
}

.sidebar-header {
  padding: rem(20);
  border-bottom: rem(1) solid #e0e0e0;

  h3 {
    margin: 0;
    font-size: rem(18);
    color: #333;
    font-weight: 600;
  }
}

.category-list {
  flex: 1;
  overflow-y: auto;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: rem(25) rem(20);
  cursor: pointer;
  transition: background-color 0.2s ease;
  // border-bottom: rem(1) solid #f0f0f0;

  &:hover {
    background-color: #f8f9fa;
  }

  &.active {
    background-color: #eaf9ee;
    border-left: rem(6) solid #32c36d;
  }

  .category-name {
    font-size: rem(20);
    font-weight: bold;
    color: #333;
    flex: 1;
  }

  .category-count {
    font-size: rem(20);
    color: #999;
    // background-color: #f0f0f0;
    padding: rem(2) rem(8);
    border-radius: rem(10);
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: calc(100vh - rem(93));
  overflow-y: auto;
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: rem(20);
  border-bottom: rem(1) solid #e0e0e0;
  background-color: #fff;
}

.breadcrumb {
  font-size: rem(16);
  font-weight: 600;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: rem(10);

  .el-button {
    display: flex;
    align-items: center;
    gap: rem(5);
  }
}

.signs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow-y: auto;
  min-height: 0;
  border-right: rem(1) solid #e0e0e0;
}

.dialogContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.sign-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: rem(15);
  border-bottom: rem(1) solid #e0e0e0;
  border-right: rem(1) solid #e0e0e0;
  height: rem(300);
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #fff;
  margin: 0;


  .sign-image {
    width: rem(150);
    height: rem(150);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: rem(10);
    border-radius: rem(8);

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }

  .sign-description {
    font-size: rem(20);
    color: #333333d9;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
  }
}

.sign-item:nth-last-child(-n+5) {
  border-bottom: rem(1) solid #e0e0e0;
}

.sign-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: rem(20);
  height: 90%;
  width: 70%;

  .signImage {
    width: rem(300);
    height: rem(200);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: rem(4);

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }

  .sign-content {
    h3 {
      margin: rem(10) 0 rem(25) 0;
      font-size: rem(20);
      color: #333;
      text-align: center;
    }

    .description {
      margin: 0;
      font-size: rem(18);
      line-height: 1.6;
      color: #666;
    }

    .pagination {
      margin-top: rem(20);
      text-align: center;
      font-size: rem(16);
      color: #999;
    }
  }
}

:deep(.el-overlay-dialog) {
  .infoDialog {
    height: rem(700);
    border-radius: rem(8);
  }
}

:deep(.el-dialog__body) {
  // padding: rem(20);
  height: 100%;
}

:deep(.el-dialog__header) {
  padding-bottom: 0 !important;
}

:deep(.el-icon) {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    transform: scale(1.2);
  }
}

.close {
  width: rem(160);
  height: rem(60);
  font-size: rem(20);
  margin-top: rem(100);
  border: rem(1) solid #dcdfe6;
  border-radius: rem(4);
  padding: rem(8) rem(15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:hover {
    color: #32c36d !important;
    background-color: #32c36c11;
    border: rem(1) solid #32c36c87;
  }
}

// 响应式设计
@media (max-width: rem(768)) {
  .traffic-signs-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: rem(200);
  }

  .signs-grid {
    grid-template-columns: repeat(auto-fill, minmax(rem(150), 1fr));
    gap: rem(15);
  }
}
</style>
